// 同步引入
import Home from "@/views/Home.vue"

const routes = [

    /* 首页重定向 */
    // { path: '/', component: Home },
    { path: '/', redirect: '/home/demos' },

    /* 路由懒加载 = 用户什么时候访问/about 就什么时候现下载对应的组件包 = 性能提升19/20 */
    { path: '/about', component: () => import("@/views/About.vue") },

    /* 动态路由匹配 */
    { path: '/user/:id(\\d{4})', component: () => import("@/views/UserDetail.vue") },

    /* 嵌套路由 */
    {
        path: '/home',
        component: Home,
        children: [
            {
                // 当 /user/:id/profile 匹配成功
                // UserProfile 将被渲染到 User 的 <router-view> 内部
                path: 'demos',
                component: () => import("@/views/demos/index.vue"),
                children: [
                    {
                        // 当 /user/:id/profile 匹配成功
                        // UserProfile 将被渲染到 User 的 <router-view> 内部
                        path: 'pinia',
                        component: () => import("@/views/demos/PiniaDemo.vue"),
                    },
                    {
                        path:"hook",
                        component:()=>import("@/views/demos/HookDemo.vue")
                    },
                    {
                        path:"directive",
                        component:()=>import("@/views/demos/DirectiveDemo.vue")
                    },
                    {
                        path:"design",
                        component:()=>import("@/views/demos/DesignDemo.vue")
                    },
                    {
                        path:"compo",
                        component:()=>import("@/views/demos/CompoDemo.vue")
                    },
                ],
            },
            {
                // 当 /user/:id/posts 匹配成功
                // UserPosts 将被渲染到 User 的 <router-view> 内部
                path: 'users',
                component: () => import("@/views/admin/Users.vue"),
            },
        ],
    },

    /* 宇宙通配 404 */
    { path: '/:shit(.*)*', name: 'NotFound', component: () => import("@/views/NotFound.vue") },
]

export default routes